/**部门电量构成分析 */
import * as React from "react";
import ReactEcharts from "echarts-for-react";
export interface DepartmentStatisticsBieChartsProps {
  dataSouce: TotalData[];
}
interface TotalData {
  id: number;
  name: string;
  val: number;
}
export interface DepartmentStatisticsBieChartsState {}

class DepartmentStatisticsBieCharts extends React.Component<
  DepartmentStatisticsBieChartsProps,
  DepartmentStatisticsBieChartsState
> {
  render() {
    return (
      <div className="chart">
        <ReactEcharts
          option={this.getOption()}
          notMerge={true}
          lazyUpdate={true}
          style={{ height: 400 }}
        />
      </div>
    );
  }
  getSeriesData(arr: TotalData[]) {
    let data: { value: number; name: string }[] = [];
    arr.map((item: TotalData) => {
      data.push({ value: item.val, name: item.name });
      return item;
    });
    return data;
  }
  getOption() {
    return {
      tooltip: {
        trigger: "item",
        formatter: "{b} : {c} ({d}%)",
      },
      legend: {
        bottom: 10,
        left: "center",
      },
      series: [
        {
          type: "pie",
          radius: "50%",
          data: this.getSeriesData(this.props.dataSouce),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
  }
}

export default DepartmentStatisticsBieCharts;
